<template>
  <div>
    <div v-if="mode == 'list-v'">
      <div style="width: auto"
           class="al-box-shadow-radius al-m-20px"
           v-for="(appointment, index) in allAppointment"
           :key="index"
      >
        <div class="al-box-shadow-radius al-overflow-hide al-cursor-pointer"
             @click="goPage('/appointment/detail/' + appointment.id)">
          <div class="al-flex-container-center-vh ">
            <ALImage
                    @click="goPage('/appointment/detail/' + appointment.id)"
                    style="height: 400px"
                    class="al-width-100"
                    :src="appointment.image"
                    fit="cover"
            />
          </div>
          <el-row class="al-height-100">
            <el-col :span="8">
              <AvatarNickname
                      class="al-p-10px"
                      :avatar="appointment.tuser.avatar"
                      :nickname="appointment.tuser.nickname"
                      :desc="appointment.tuser.identity"/>
            </el-col>

            <el-col :span="8" class="">

              <div style="height: 78px" class="al-flex-container-center-vh">

                <div class="al-title-h3">{{appointment.title}}</div>
              </div>

            </el-col>
            <el-col :span="8">
              <div style="height: 78px" class="al-flex-container-center-v al-float-right al-m-right-10px">
                <div>{{appointment.createTime}}</div>

              </div>
            </el-col>
          </el-row>
        </div>

      </div>
    </div>

    <div v-else-if="mode == 'list-h'" class="al-flex-wrap al-flex-justify-space-around">
      <div v-for="(appointment, index) in allAppointment"
           class="al-width-45 al-m-10px"
           :key="index"
      >
        <div class="al-box-shadow-radius al-overflow-hide al-cursor-pointer"
             @click="goPage('/appointment/detail/' + appointment.id)">
          <div class="al-flex-container-center-vh ">
            <ALImage
                    @click="goPage('/appointment/detail/' + appointment.id)"
                    style="height: 400px"
                    class="al-width-100"
                    :src="appointment.image"
                    fit="cover"
            />
          </div>
          <el-row class="al-height-100">
            <el-col :span="12">
              <AvatarNickname
                      class="al-p-10px"
                      :avatar="appointment.tuser.avatar"
                      :nickname="appointment.tuser.nickname"
                      :desc="appointment.tuser.identity"/>
            </el-col>

            <el-col :span="12" class="">

              <div style="height: 78px" class="al-flex-container-center-vh">

                <div class="al-title-h3">{{appointment.title}}</div>
              </div>

            </el-col>
<!--            <el-col :span="8">-->
<!--              <div style="height: 78px" class="al-flex-container-center-v al-float-right al-m-right-10px">-->
<!--                <div>{{appointment.createTime}}</div>-->

<!--              </div>-->
<!--            </el-col>-->
          </el-row>
        </div>

      </div>
    </div>

  </div>
</template>

<script>
  import AvatarNickname from "../../../components/public/AvatarNickname";
  import ALImage from "../../../components/public/ALImage";
  export default {
    name: "ShowAppointmentComponent",
    //组件
    components: {ALImage, AvatarNickname},
    //属性
    props: {
      allAppointment: Array,
      mode: {
        type: String,
        default: 'list-v'
      }
    },

    //数据
    data() {
      return {}
    },

    //挂载完成时
    mounted() {

    },

    //方法
    methods: {
      goPage: function (path) {
        this.gotoPage(path);
      },
    },

    //计算属性
    computed: {},

    //监听
    watch: {}
  }
</script>

<style scoped>

</style>
